<template>
  <div class="TabBar">
    <div class="fixed">
      <ul>
        <li v-for="(item,index) in dataList.slice(0,2)" :key="index" class="list">
          <div @click="tabBar(item.path, item.name, item.type)">
            <span class="icon" :class="{'icon-index':item.type===1,'icon-store':item.type===2,'icon-cate':item.type===3,'icon-mine':item.type===4,active: isActive === item.type}"></span>
            <span class="name" :class="{active: isActive === item.type}">{{item.textName}}</span>
          </div>
        </li>
        <li class="nav_logo"><img :src="nav_logo"></li>
        <li v-for="(item,index) in dataList.slice(2,4)" :key="index+2" class="list">
          <div @click="tabBar(item.path, item.name, item.type)">
            <span class="icon" :class="{'icon-index':item.type===1,'icon-store':item.type===2,'icon-cate':item.type===3,'icon-mine':item.type===4,active: isActive === item.type}"></span>
            <span class="name" :class="{active: isActive === item.type}">{{item.textName}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'TabBar',
  data () {
    return {
      isTime: false,
      dataList: [ {
        path: '/index',
        name: 'index',
        className: 'icon-index',
        type: 1,
        textName: '首页'
      }, {
        path: '/store',
        name: 'store',
        className: 'icon-store',
        type: 2,
        textName: '门店'
      }, {
        path: '/mall',
        name: 'mall',
        className: 'icon-cate',
        type: 3,
        textName: '分类'
      }, {
        path: '/my',
        name: 'my',
        className: 'icon-mine',
        type: 4,
        textName: '我的'
      }
      // , {
      //   path: '/announcement/list',
      //   name: 'announcement',
      //   className: 'icon-announcement',
      //   type: 3,
      //   textName: '公告'
      // }
      ],
      nav_logo: '/static/img/nav_logo.png'
    };
  },
  props: {
    value: {
      type: Number
    }
  },
  computed: {
    ...mapGetters(['isTabBar']),
    isActive: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    tabBar (url, name, type) {
      this.$router.push({ 'path': url });
    }
  }
};
</script>
<style scoped lang="less">
.TabBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  height:1.3rem;
  .fixed {
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    transform: translateZ(0);
    border-top: 1px solid #EEF0F1;
    height:100%;
  }
  ul {
    display: flex;
    padding: 10px 0.2rem 7px;
    .nav_logo{
      width:20%;
      position: relative;
      img{
        position: absolute;
        top:-0.5rem;
        left:50%;
        transform: translate(-50%,0);
        width:1.6rem;
      }
    }
    li {
      flex: 1;
      text-align: center;
      background-color: #fff;
      padding: 3px 0 0;
      .icon {
        width: 0.5rem;
        height: 0.5rem;
        background-repeat: no-repeat;
        display: inline-block;
        background-position: center center;
        background-size: contain;
      }
      .icon.icon-index {
        background-image: url('/static/img/nav/nav_index.png');
      }
      .icon.icon-index.active {
        background-image: url('/static/img/nav/nav_index_active.png');
      }

      .icon.icon-store {
        background-image: url('/static/img/nav/nav_store.png');
      }
      .icon.icon-store.active {
        background-image: url('/static/img/nav/nav_store_active.png');
      }

      .icon.icon-cate {
        background-image: url('/static/img/nav/nav_cate.png');
      }
      .icon.icon-cate.active {
        background-image: url('/static/img/nav/nav_cate_active.png');
      }

      .icon.icon-mine {
        background-image: url('/static/img/nav/nav_mine.png');
      }
      .icon.icon-mine.active {
        background-image: url('/static/img/nav/nav_mine_active.png');
      }

      // .icon.icon-announcement {
      //   background-image: url('/static/img/nav/icon-announcement.png');
      // }
      // .icon.icon-announcement.active {
      //   background-image: url('/static/img/nav/icon-announcement-active.png');
      // }
      .name {
        font-size: 20px;
        display: block;
        padding: 2px 0 0;
        color: #333;
      }
      .name.active {
        color: #ffc500;
      }
    }
  }
}
</style>
